import "./RdArticlesPage.scss";
import {ReactComponentPage} from "../../class/ReactComponentPage";
import {RouteComponentProps, StaticContext} from "react-router";
import React from "react";
import {BookInfo} from "../../components/BookInfo/BookInfo";
import tableBookList from "../../../common/function/tableBookList";
import {Button, message} from "antd";
import {TableBookList} from "../../../common/class/TableBookList";
import {Link} from "react-router-dom";
import {TableArticleList} from "../../../common/class/TableArticleList";
import {ArticleBtn} from "../../components/ArticleBtn/ArticleBtn";

export namespace RdArticlesPage {
    interface RouteParams {
        bookId: string;
    }
    export interface Props extends ReactComponentPage.Props, RouteComponentProps<RouteParams, StaticContext, any> {
    }
    export interface State extends ReactComponentPage.State {
        bookData: Partial<TableBookList.Data>;
        articleList: TableArticleList.Data[];
    }
}

export class RdArticlesPage extends ReactComponentPage<RdArticlesPage.Props, RdArticlesPage.State> {
    public readonly state: RdArticlesPage.State = {
        bookData: {},
        articleList: [],
    };
    public render() {
        return (<div className={this.getClsName("rd-articles-page-component")}>
            <h3 className="page-title">章节目录页面</h3>
            <div className="first-row text-right">
                <Button type="primary">
                    <Link to="/read/books">返回书籍列表页面</Link>
                </Button>
                <Button type="primary">
                    <Link to="/">返回首页</Link>
                </Button>
            </div>
            <BookInfo baseData={this.state.bookData}></BookInfo>
            <div className="articles-row">{this.getArticleList()}</div>
        </div>);
    }
    public getBookId(): number {
        return parseInt(this.props.match.params.bookId) || 0;
    }
    public componentDidMount(): void {
        this.updateBookData();
    }
    protected updateBookData() {
        const bookId = this.getBookId();
        if (bookId) {
            tableBookList
                .select()
                .where("id", bookId)
                .find()
                .then((row) => {
                    this.setState({
                        bookData: row,
                    });
                    this.updateArticleList();
                }).catch((err) => {
                    console.error(err);
                    message.error("获取书籍信息出错");
                });
        } else {
            message.error("无效的书籍索引");
        }
    }
    protected updateArticleList() {
        const bookId = this.getBookId();
        TableArticleList
            .getInstance()
            .select()
            .where({
                book_id: bookId,
            })
            .orderBy("article_index DESC")
            .findAll()
            .then((rows) => {
                const articles = rows as TableArticleList.Data[];
                this.setState({
                    articleList: articles,
                });
            })
            .catch((err) => {
                console.error(err);
            });
    }
    protected getArticleList() {
        return this.state.articleList.map((articleItem, index) => {
            return (<ArticleBtn key={`article-item-${index}-${articleItem.id}`} articleInfo={articleItem} />);
        });
    }
}
